<template>
  <div style="height: 100%">
    <el-container style="height: 100%">
      <!-- 头部 -->
      <el-header style="background-color: #8DC5D8;">
        <!-- 左边部分 -->
        <el-row type="flex" justify="space-between">
          <el-col :span="4">
            <el-button type="text" style="font-size: 30px; color: black">
              <span class="material-icons" style="font-size: 40px; color: black">support_agent</span>
              中移在线客服系统
            </el-button>
          </el-col>

        </el-row>
      </el-header>

      <el-container>
        <!-- 侧边栏 -->
        <el-aside width="230px" style="background-color: #B2D9E6;">
          <el-menu default-active="/OrderManager" class="el-menu-vertical-demo" background-color="#B2D9E6"
            text-color="#000000" active-text-color="#0a90bd" router>

            <el-menu-item index="/OrderManager" @click="addTab('订单管理', '订单管理', '/OrderManager')">
              订单管理
            </el-menu-item>
            <el-menu-item index="/ServiceManager" @click="addTab('售后单管理', '售后单管理', '/ServiceManager')">
              售后单管理
            </el-menu-item>
            <el-menu-item index="1-3">
              系统管理
            </el-menu-item>
            <el-menu-item index="/Call" @click="addTab('客服交互', '客服交互', '/Call')">
              客服交互
            </el-menu-item>
            <el-menu-item index="/MonitorIndex" @click="addTab('订单监控', '订单监控', '/MonitorIndex')">
              订单监控
            </el-menu-item>
          </el-menu>
        </el-aside>

        <!-- 右侧主题 -->
        <el-main style="background-color: #D8ECF3;">
          <!-- <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="handleTabClick">
            <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
              <router-view @childOrderNum="getChildOrderNum" @orderOrderNum="getOrderOrderNum" ></router-view>
            </el-tab-pane>
          </el-tabs> -->

          <router-view @childOrderNum="getChildOrderNum" @orderOrderNum="getOrderOrderNum" ></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuNameList: [
        "订单管理", "售后单管理", "客服交互", "订单监控"
      ],
      // 当前选择的标签页，对应tab.name，必须唯一
      editableTabsValue: '',
      // 标签页数组
      editableTabs: [
        // {
        //   title: "订单管理",
        //   name: "订单管理",
        //   path: "/OrderManager"
        // },
      ],
      tabIndex: 0,
      // 上一个标签页
      preTab: ""
    };
  },

  methods: {
    // 从OrderManager获取主订单号并跳往主订单页
    getOrderOrderNum(orderNum) {
      this.addTab(orderNum, orderNum, "/OrderDetail");
    },

    // 从OrderManager获取子订单号并跳往子订单页
    getChildOrderNum(orderNum) {
      this.addTab(orderNum, orderNum, "/OrderChild");
    },

    // 添加标签页并切换
    addTab(tabTitle, name, path) {
      // 判断标签页是否已经在数组，不存在则添加
      let isExist = false;
      this.editableTabs.forEach(item => {
        if (item.name == name) {
          isExist = true;
        }
      })
      if (!isExist) {
        this.tabIndex++;
        this.editableTabs.push({ "title": tabTitle, "name": name, "path": path });
      }

      // 切换当前标签页
      this.editableTabsValue = name;

      if (!this.menuNameList.includes(name)) {
        this.$router.push({ path: path, query: { "orderNum": name } });
      }
    },


    // 点击标签页获取订单号
    handleTabClick(tab) {
      // 获取点击的标签页对应的 item 对象
      let clickedItem = this.editableTabs.find(item => item.name === tab.name);
      // 从 clickedItem 中获取属性

      if (clickedItem && clickedItem.name != this.preTab) {
        this.preTab = tab.name;
        this.changeTab(clickedItem.name, clickedItem.path);
        // 通过 clickedItem.propertyName 获取对应属性值
      }
    },

    // 切换标签页
    changeTab(name, path) {
      console.log("执行");
      // 切换当前标签页
      this.editableTabsValue = name;
      // 页面跳转
      if (this.$route.query.orderNum != name) {
        if (this.menuNameList.includes(name)) {
          this.$router.push({ path: path });
        } else {
          this.$router.push({ path: path, query: { "orderNum": name } });
        }
      }
    },

    // 移除标签页
    removeTab(removeName) {
      // 标签页数组
      let tabs = this.editableTabs;
      // 当前选择的标签页
      let activeTabName = this.editableTabsValue;
      // 当前激活的页面为要删除的页面
      if (activeTabName === removeName) {
        tabs.forEach((tab, index) => {
          // 从数组找到删除的标签页下标
          if (tab.name === removeName) {

            // 移除后下一个选择的标签页
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeTabName = nextTab.name;

              if (this.menuNameList.includes(removeName)) {
                this.$router.push({ path: nextTab.path });
              } else {
                this.$router.push({ path: nextTab.path, query: { "orderNum": activeTabName } });
              }

            }

            this.editableTabsValue = activeTabName;
            this.editableTabs = tabs.filter(tab => tab.name !== removeName);
          }
        });
      }
    }
  },
  created() {
    this.addTab("订单管理", "订单管理", "/OrderManager");
    this.editableTabsValue = "订单管理";
    this.$router.push({ path: "/OrderManager" });
  }
};
</script>

<style scoped></style>